<template>
  <div class="tmpl">
    <div class="tmpl-img" />
    <div class="tmpl-mask">
      <el-button
        class="star"
        size="mini"
      >
        <svg-icon v-if="like" icon-class="star" class="star-like" />
        <i v-else class="el-icon-star-off" />
      </el-button>
      <el-button class="start-btn" size="mini" plain>开始制作</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      like: true
    }
  }
}
</script>

<style lang="scss" scoped>
.tmpl {
  position: relative;
  width: 216px;
  height: 216px;
  border-radius: 4px;
  overflow: hidden;
  &-img {
    display: block;
    height: 100%;
    background: red;
  }
  &-mask {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba($color: #000000, $alpha: 0.6);
  }
  .star {
    top: 12px;
    right: 12px;
    position: absolute;
    padding: 5px;
    color: #FFF;
    background: transparent;
    &-like {
      color: #E8BC5F;
    }
  }
  .start-btn {
    color: #FFF;
    background: transparent;
  }
}
</style>
